<template>
  <div>
   <el-input class="inputs" size="mini" v-model="input" placeholder="请输入内容"></el-input>
    <el-select size="mini" style="width:130px" v-model="valuez" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  <el-button type="primary" size="mini" class="select" icon="el-icon-search"  @click="searchFn">搜索</el-button>
    <el-button type="primary" size="mini" icon="el-icon-plus" @click="addNewitem">新增</el-button>
      <el-button type="primary" size="mini" class="renovate" icon="el-icon-refresh">刷新</el-button>
    <!-- 点击新增 -->
   <Groupadd
   :dialogVisible="dialogVisible"
   @closeAdd="closeAdd"
   >
    </Groupadd>
    <!-- 表格 -->
    <Groupxz
    :list="list"
    >
      </Groupxz>
  
     <div>
          <el-pagination
            :border="false"
            :tableData="tableData"
            :headData="headData"
            @SizeChange="SizeChange"
            @CurrentChange="CurrentChange"
            :total="total"
            :pagesize="pagesize"
            :currentpage="currentpage"
           >
          </el-pagination>
        </div>

     
  </div>
  
</template>

<script>
import {gorupbooking,searchGroup}  from '@/api/GroupProducts'
import Groupadd from '../../components/Group/Groupadd.vue'
import Groupxz from  '../../components/Group/Groupxz.vue'
import moment from 'moment'
export default {
   components: {Groupadd,Groupxz},
  name:'GroupProducts',
  data(){
    return{
      selvalue:'',
      options:[
        {
          value:"产品名称",
          label:1

        }
      ],
      dialogVisible: false,
      input:"",
      valuez:"",
      data:null,
      list:[],
          ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },

    }
    
  },
   
      
  mounted(){
   gorupbooking().then(res=>{
    console.log(res);
    let _self = this;
       _self.list = res.content;
       console.log(this.list);
       _self.list.stopTime=res.content[0].stopTime
       _self.list.stopTime=moment(_self.list.stopTime).format("yyy年MM月DD日 HH:mm:ss");
       console.log(_self.list.stopTime);
       this.$set(res.content[0],"stopTime",res.content.stopTime)
   })
    
  },
  methods:{
    addNewitem(){
      this.dialogVisible = true
      console.log(this.dialogVisible);
      
    },
  
    searchFn(){
      let _self =this;
      if(_self.input==''&&_self.valuez==''){
         _self. data="&value=&type";
      }else if(_self.input==''&&_self.valuez){
        _self.data="&value=&type=title"
      }else if(_self.valuez==''&_self.input){
        _self.data=`&value=${encodeURIComponent(_self.input)}&type=title`
      }else{
        _self.data=`&value=${encodeURIComponent(_self.input)}&type=${encodeURIComponent(_self.valuez)}`
      }
     searchGroup(_self.data).then(res=>{
      console.log(res);
        for(let i=0;i<res.content.length;i++){
      var nameSn =_self.input.trim().toLowerCase();
      var nameLt =res.content[i].title.trim().toLowerCase();
      var arr =nameSn.split("");
      for(var j=0;j<arr.length;j++){
        if(nameLt.search(arr[j])!=-1){
          _self.list=[];
          _self.list.push(res.content[i])
          _self.turnToTime(_self.list);
        }else{
          _self.list=[]
        }
      }
     }
     _self.input="";
     _self.valuez=""
     })
   
    },
    handleSizeChange(){

    },
    handleCurrentChange(){

    },
     //关闭新增弹窗
     closeAdd(){
      this.dialogVisible = false;
     },
    
 
  }

}
</script>

<style>
.inputs{
  width: 200px;
}
.select{
  background:#13ce66 ;
  border: #13ce66;
}
.renovate{
  background: #ff4949;
  border: #ff4949;
}
.table{
  /* padding: 20px 20px 45px 20px; */
  margin-top: 20px;
}
.open{
  height: 24px;
    padding: 0 8px;
    line-height: 22px;
}
.addimage{
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 148px;
    height: 148px;
    cursor: pointer;
    line-height: 146px;
    vertical-align: top;
}
/*content: "\E6D9"; */
.addimage .el-icon-plus{ 
  display: flex;
  align-items:center;
  justify-content: center;
  line-height: 148px;
  font-size: 30px;
  
}
.tableImage {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.block{
 margin-left: 25px;
 margin-bottom: 20px;
}
.blocks{
 margin-left: 25px;

}
</style>